<template>
  <section>
    <el-card shadow="never" class="searchBox">
      <el-form inline size="small">
        <el-form-item>
          <el-input v-model="height" size="small" placeholder="请输入要查询的区块高度">
            <template slot="prepend">
              <i class="el-icon-search"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜 索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-row class="mr_vertical_10">
      <Block :data="data" />
    </el-row>
    <el-row class="mr_vertical_10">
      <CurrInformation :data="data" />
    </el-row>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch } from "vue-property-decorator";
import Block from "./blockDetail/block.vue";
import CurrInformation from "./blockDetail/currInformation.vue";

@Component({
  components: {
    Block,
    CurrInformation
  }
})
export default class MyApplication extends Vue {
  protected options: any = [
    {
      label: "请输入要查询的区块高度",
      name: "选择分类",
      value: 1,
      type: "text",
      icon: "el-icon-arrow-right el-icon--right"
    }
  ];
  protected data: any = {};
  protected searchData: any = {
    value: []
  };
  protected searchStyle: boolean = true;
  private a: any = "";
  private height: any = "";

  protected handleSearch() {
    this.init();
  }
  protected created() {
    this.$nextTick(() => {
      this.height = this.$route.query.height;
      this.init();
    });
  }
  protected init() {
    const params: any = {
      height: this.height
    };
    this.$api.getBlocksGet(params).then((res: any) => {
      const { data } = res;
      if (data) {
        this.data = res.data;
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.cardBox {
  height: 55vh;
  overflow: hidden;
}
</style>


